<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="login">   	
    	<div class="xiaochu">
        <div class="loginope" v-loading.body="loading" element-loading-text="登录中....">
            <div id="head"></div>
            <h3>去向无忧药品追溯系统</h3>
            <div class="blank"></div>
            <div class="loginIng" id="user">
                <div></div>
                <div>
                    <div class="username"><img src="/static/img/账号.png" alt="username" /></div>
                    <input type="text" v-model="user.name" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;">
                    <div class="accountDelete" @click="accountDelete"><img src="../../static/img/删除账号.png" alt="" /></div>
                </div>
            </div>
            <div class="loginIng" id="user" v-show="loginIng">
                <div></div>
                <div>
                	<div class="password" ><img src="../../static/img/密码.png" alt="password" /></div>
                	<input type="password" v-model="user.password" @keyup.enter="submit" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;">               	
                	<div class="hiddenPassword" @click="chakan">
                		<a href="javascript:;" >               			
                			<img src="../../static/img/查看密码.png" alt="" v-show="seePassword"/>
                		</a>
                	</div>
                </div>
            </div>
            <div class="loginIngbox" v-show="loginIngbox">
                <div></div>
                <div>
                	<div class="loginpassword" ><img src="../../static/img/mima.png" alt="password" /></div>
                	<input type="text" v-model="user.password" @keyup.enter="submit" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;">               	
                	<div class="loginhiddenPassword" @click="mimi">
                		<a href="javascript:;" >               			
                			<img src="../../static/img/隐藏密码.png" alt="" />
                		</a>
                	</div>
                </div>
            </div>
            <div class="loginBut">
                <div>
                    <template>
                        <el-checkbox class="memory" v-model="checked">记住密码</el-checkbox>
                    </template>
                </div>
            </div>
            <div class="denglu">
               <div class="debark" @click="loginClick">
               <a href="javascript:;">登录</a>	
               </div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'login',
        data() {
            return {
                loginIngbox: false,
                loginIng: true,
                checked: false,
                user: {
                    name: '',
                    password: ''
                },
                loading: false,
                seePassword:true
            }
        },
        created: function () {
             if(navigator.userAgent.toLowerCase().indexOf('se 2.x')>-1 ? true : false)
  {
  this.seePassword=false
  }
            var self = this      
            sessionStorage.removeItem('userId')
            sessionStorage.removeItem('userName')
            var name = localStorage.getItem('name')
            var psw = localStorage.getItem('psd')
            var checkStr = localStorage.getItem('check');
            if (checkStr == 'true') {
                self.checked = true
            } else {
                self.checked = false
            }
            self.user.name = name
            self.user.password = psw
//          document.querySelector('body').addEventListener('keypress', function (e) {
//          	var  path=self.$route.path.split('/')[1]
//          	if(path=='login'){
//          		 if (e.keyCode === 13) {
//                         self.submit();
//              }
//          	}
//             
//          })
        },
        methods: {
        	chakan:function(){
        		this.loginIngbox=true
        		this.loginIng=false
        	},
        	mimi:function(){
        		this.loginIngbox=false
        		this.loginIng=true
        	},
        	accountDelete:function(){
        		this.user.name=""
        	},
        	submit:function(){
        		this.loginClick()
        	},
            loginClick() {            	
                var memoryStr = this.checked
                if (memoryStr == true) {
                    localStorage.setItem('name', this.user.name)
                    localStorage.setItem('psd', this.user.password)
                    localStorage.setItem('check', this.checked);
                } else {
                    localStorage.removeItem('name', this.user.name)
                    localStorage.removeItem('psd', this.user.password)
                    localStorage.removeItem('check', this.checked);
                }
                if (this.user.name == null || this.user.password == null) {
                    this.$message({
                        type: 'info',
                        message: '账号或密码不能为空!'
                    });
                } else {               	 
                    this.loading = true
                    this.login({
                        account: this.user.name,
                        password: this.user.password                       
                    }).then((data) => {                      
                        if (data.code == 200) {
                            this.loading = false
                            sessionStorage.setItem('userId', data.data.id)
                            sessionStorage.setItem('userName', data.data.account)
                            sessionStorage.setItem('companyName', data.data.companyName)
                            this.$router.push({
                                path: '/home'
                            })                          
                        } else {
                            this.loading = false
                            this.$message({
                                type: 'info',
                                message: '账号或密码错误!'
                            });
                        }
                    }).catch(msg => {
                        if (msg.status == 500) {
                            this.$message({
                                type: 'info',
                                message: '服务器没有启动!'
                            });
                            this.loading = false
                        }
                        if (msg.status == 603) {
                            this.$message({
                                type: 'info',
                                message: '请求超时，服务器没有启动!'
                            });
                            this.loading = false
                        }
                    });
                }
            },
        ...mapActions(['login'])
        }
    }

</script>
<style scoped src="../assets/css/login.css">

</style>